<template>
  <div class="footer-nav">
    <router-link to="/homePage" class="nav-item" :class="{ active: activeTab === 'home' }" @click="setActiveTab('home')">
      <span class="icon">🏠</span>
      <span class="text">首页</span>
    </router-link>
    
    <router-link to="/navtest" class="nav-item" :class="{ active: activeTab === 'category_homepage' }" @click="setActiveTab('category_homepage')">
      <span class="icon">📋</span>
      <span class="text">分类</span>
    </router-link>
    
    <router-link to="/orders" class="nav-item" :class="{ active: activeTab === 'myFavorite' }" @click="setActiveTab('myFavorite')">
      <span class="icon">📦</span>
      <span class="text">订单</span>
    </router-link>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';

// const active = ref();
const router=useRouter()
const route = useRoute();
const activeTab = ref(getInitialTab());

function getInitialTab() {
  const path = route.path;
  if (path.includes('home')) return router.push({name:'homepage'});
  if (path.includes('navtest')) return router.push({name:'Navtest'});
  if (path.includes('myFavorite')) return router.push({name:'myFavorite'});
  //return router.push({name:'homePage'});
}

function setActiveTab(tab) {
  activeTab.value = tab;
}
</script>

<style scoped>
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  flex: 1;
  height: 100%;
}

.nav-item.active {
  color: #ff6b6b;
}

.icon {
  font-size: 20px;
  margin-bottom: 4px;
}


.text {
  margin-top: 5px;
}
</style>
